<template>
  <div class="box">
     <div id="box_login">
      <!--使用 表单  获取用户输入的数据（账号 密码）-->
        <el-form :model="loginForm" label-width="80px">
          <el-form-item label="账号：" prop="username">
            <el-input v-model="loginForm.userName" 
                      style="width: 300px;" placeholder="请输入用户名"></el-input>
          </el-form-item>

          <el-form-item label="密码：" prop="password">
            <!-- 用于获取用户密码的文本框 -->
            <el-input v-model="loginForm.password" 
                      style="width: 300px;" placeholder="请输入密码"></el-input>
          </el-form-item>
          
          <el-form-item>
            <!-- 按钮 -->
            <el-button @click="login" style="width: 300px;" type="primary">登录</el-button>

          </el-form-item>
          </el-form>
    </div>
  </div>
</template>

<script setup lang="ts" name="Login">

import {ref} from "vue";

//引入 自己定义的方法库
import {post} from "@/assets/request.ts";
import type { RefSymbol } from "@vue/reactivity";
import router from "@/router";
//定义 用户名登录的对象
let loginForm = ref({userName:'', password:''});

const login = () =>{
  //该方法用于发起请求(post请求)
  //http://localhost:8083 >>>> /api
  post('/api/login',{userName: loginForm.value.userName ,password: loginForm.value.password})
    .then(response=>{
      //请求成功后
      //将结果打印控制台中
      console.log(response)
      //将登录结果转换为JSON字符串 缓存在session
      sessionStorage.setItem('user',JSON.stringify(response))
      // router.push({path:"/main"})
      //push 历史记录追加
      //replace 不追加历史记录
      router.replace({name:'main'});
    })
}
</script>

<style scoped lang="css">
  .box{
    background-image: url(../assets/login.jpg);
    background-repeat: no-repeat;
    background-size: 150%;
    background-position: -800px -1000px;
    width: 100%;
    height: 100vh;
  }

  #box_login{
    border-radius: 20px;
    position: fixed;
    background-color: rgba(0, 0, 0, .3);
    widows: 410px;
    padding:30px;
    left: 30%;
    top: 30%;
  }

  ::v-deep .el-form-item .el-form-item__label{
    color: white;
  }

</style>